<template>
    <div class="app-container">
         <div class="designer" style="height: 100%">
             <div>
                 <!-- 我的消息 -->
                <div style="marginBottom: 20px">
                    <el-input v-model="searchText" placeholder="请输入要查询的关键字" size="small" style="width: 200px">
                    </el-input>
                    <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchChange">搜索</el-button>
                    <el-button style="marginLeft: 10px" size="small" @click="reset">重置</el-button>
                    <div style="float: right">
                        <el-button type="primary"  size="small" @click="delMulti">删除</el-button>
                        <el-button size="small" @click="multiRead">标记已读</el-button>
                        <el-button size="small" @click="multiALLRead">全部已读</el-button>
                    </div>
                </div>
                <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%; marginBottom: 20px" size="small"
                    @selection-change="handleSelectionChange" v-loading="tableLoading" class="tableInfo"  row-key="id"
                    @filter-change="filterChange"
                    @sort-change="changeTableSort"
                    >
                    <el-table-column type="selection" width="80" align="center" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column label="序号" width="80" align="center">
                        <template slot-scope="scope">
                        <span>{{
                            scope.$index + (page.pageNo - 1) * page.pageSize + 1
                        }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="消息标题" align="center" show-overflow-tooltip>
                    </el-table-column>
                      <el-table-column prop="content" label="消息内容" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                             <span v-if='scope.row.type != 0'>{{scope.row.contentDisplay}}</span>
                             <span v-html="scope.row.content" v-if='scope.row.type == 0'></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="消息类型" align="center"  
                        column-key="type"
                        :filters="[{ text: '系统消息', value: 0 },{ text: '公告', value: 1 },{ text: '新闻', value: 2 },{ text: '会议', value: 3 },{ text: '通知', value: 4 }]"
                        >
                          <template slot-scope="scope">
                            <span>{{messageType.filter((_) => _.value == scope.row.type)[0] && messageType.filter((_) => _.value == scope.row.type)[0].text}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="状态" align="center"
                        column-key="state"
                        :filters="[{ text: '未读', value: 0 },{ text: '已读', value: 1 }]"
                    >
                        <template slot-scope="scope">
                            <span>{{stateList.filter((_) => _.value ==scope.row.state)[0] && stateList.filter((_) => _.value ==scope.row.state)[0].text}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sendTime" label="发送时间" align="center" sortable>
                        <template slot-scope="scope">{{
                            getDateTime(scope.row.sendTime)
                        }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" type="text" @click="checkForm(scope.row)">查看</el-button>
                            <el-button size="small" type="text" @click="delForm(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background :layout="layout" :total="pageTotal" :page-size="page.pageSize" :page-sizes="pageSizes"
                :current-page="page.pageNo" style="float: right;marginBottom: 20px" @size-change="sizeChange" @current-change="currentChange">
                </el-pagination>
             </div>
         </div>
    </div>
</template>

<script>
import { getMyMessage, delMyMessage,readMyMessage, delMultiMyMessage, getMyMessageByDictType} from '@/api/custom/message'
  export default {
    name: 'myMessage',
    data() {
        return {
            contentDetalles: '',
            titleDetalles: '',
            timeDetalles: '',
            editor: '',
            tableLoading: false,
            searchText: '',
            tableData: [],
            multipleSelection: [],
            layout: "prev, pager, next,sizes,jumper", //分页显示布局
            pageSizes: [10, 20, 30, 50], //分页显示每页条数选择
            pageTotal: 3,
            page: {
                pageNo: 1, // 当前页数
                pageSize: 10, // 每页显示多少条
            },
            stateList: [
              { text: '未读', value: 0 },{ text: '已读', value: 1 }
            ],
            //  messageType: [
            //     {id:0, type: 0, name: '系统消息'},
            //     {id:1, type: 1, name: '公告'},
            //     {id:2, type: 2, name: '新闻'},
            //     {id:3, type: 3, name: '会议'},
            //     {id:4, type: 4, name: '通知'},
            // ],
            sortArrData: '',
            type: [],
            state: [],
            messageType: []
         };
    },
    mounted() {
      this.getList();
      this.getMessageType()
    },
    methods: {
        getMessageType(){
            getMyMessageByDictType().then((res) => {
                if(res.code === 0){
                    this.messageType = this.changekey(res.data)
                }   
            })
        },
        changekey(arr){
            arr.forEach(iterator=> {
                iterator['text'] = iterator.label; 
                delete iterator.label; //将修改的旧属性名删除
            })
            return arr
        },
        currentChange(current) {
            this.page.pageNo = current;
            this.getList();
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.page.pageNo = 1;
            this.getList();
        },
     //获取表单数据
      getList() {
        this.tableLoading = true;
        let params = {
          stateList: this.state,
          types: this.type,
          sortord: this.sortArrData,
          ...this.page,
          value: this.searchText,
        };
        getMyMessage(params)
          .then((res) => {
            if (res.code === 0) {
              this.tableData = res.data.list;
              this.pageTotal = res.data.total;
              this.tableLoading = false;
            }
          })
          .catch((e) => {
            this.tableLoading = false;
          });
        },
        delForm(row) { // 删除
            const that = this;
            this.$modal.confirm('是否确定删除！').then(function() {
                delMyMessage(row.userAnnouncementId).then(response => {
                    if(response.code ===0 ){
                        that.$modal.msgSuccess("删除成功");
                        that.getList();
                    }
                })
            }).catch(() => {});
        },
        reset() {
            this.searchText = ''
            this.searchChange()
        },
           //搜索
        searchChange() {
            this.page.pageNo = 1;
            this.getList();
        },
        filterChange(val){
            console.log(val,'valinkey');
            for (const key in val) {
                if(key == "type"){
                    this.type = val[key];
                }else if(key == "state"){
                    this.state = val[key];
                }
            }
            this.page.pageNo = 1;
            this.getList(); //获取数据的接口
        },
        changeTableSort({ column, prop, order }) {
            let sortSign = "";
            if (order == "descending") {
                sortSign = "DESC";
                this.sortArrData = sortSign;
            } else {
                sortSign = "ASC";
                this.sortArrData = sortSign;
            }
            this.page.pageNo = 1;
            this.getList(); //获取数据的接口
        },
        checkForm(row) {
            this.$router.push({
                path: '/message/detail',
                query: {
                    id: row.id,
                }
            });
        },
         //多选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        multiRead() { // 标记已读
            if(this.multipleSelection.length > 0) {
                let arr = []
                this.multipleSelection.map((_) => arr.push(_.id))
                readMyMessage(arr).then((res)=>{
                    if(res.code == 0){
                        this.$refs.multipleTable.clearSelection();
                        this.getList();
                    }
                })
            }else{
                this.$message({
                    message: '请先选择消息!',
                    type: 'warning'
                });
            }
        },
        multiALLRead() { // 全部已读
            readMyMessage([]).then((res)=>{
                if(res.code == 0){
                    this.getList();
                }
            })
        },
        delMulti() { //批量删除
          const that = this;
          if(that.multipleSelection.length > 0){
              this.$modal.confirm('是否确定删除选中的消息！').then(function() {
                let arr = []
                that.multipleSelection.map((_) => arr.push(_.userAnnouncementId))
                delMultiMyMessage(arr).then(response => {
                    if(response.code ===0 ){
                        that.$modal.msgSuccess("删除成功");
                        that.$refs.multipleTable.clearSelection();
                        that.getList();
                    }
                })
            }).catch(() => {});
          }else{
            this.$message({
                message: '请先选择要删除的消息!',
                type: 'warning'
            });
          }
        },
         //时间戳转日期时间
        getDateTime(time) {
            if (!time) return ''
            let date = new Date(time)
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            let hour = date.getHours()
            let minute = date.getMinutes()
            let second = date.getSeconds()
            return `${year}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`
        },
    },
  }
</script>
<style lang="scss" scoped>
    .detailContent{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
    }
    .title{
        font-size: 16px;
    }
    .titleMessage{
        font-size: 18px;
        margin-bottom: 10px;
    }
    .content{
        color: rgb(138, 144, 156);
        span:nth-child(1){
            margin-right: 30px;
        }
    }
</style>
